<template>
  <div>
    <t-sticky>
      <t-navbar
        title="账号与安全"
        :fixed="false"
        left-arrow
        @left-click="handleBack"
      />
    </t-sticky>
    <div class="page">
      <t-cell-group bordered style="background: #fff">
        <t-cell title="ID" :note="userInfo.userId?.toString()" arrow hover />
        <t-cell
          title="手机号码"
          :note="userInfo.phone ? userInfo.phone : '绑定手机'"
          arrow
          hover
          @click="goToBandPhone"
        />
      </t-cell-group>
      <!-- <div class="ge"></div> -->
      <t-cell-group bordered style="background: #fff; margin-top: 15px">
        <t-cell title="设置密码" arrow hover @click="goToUpdatePassword" />
      </t-cell-group>
      <div class="btn" @click="getLoginOut">
        <p>退出登录</p>
      </div>
    </div>
    <div class="zhe" v-show="isShowDialog">
      <div class="tan-box">
        <p>
          当前账号没有绑定手机号码，为避免账号丢失，建议绑定手机号后退出登录
        </p>
        <div class="btn-list">
          <p @click="onCancel">取消</p>
          <p @click="onConfirm">我要退出</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import myApi from "@/api/myApi";
import { ref, onMounted } from "vue";
import { Toast } from "tdesign-mobile-vue";
import { useRouter, useRoute } from "vue-router";
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();
const router = useRouter();

const userInfo = ref({});
const show = ref(false);
const isShowDialog = ref(false);

// 检测是否绑定手机号
const checkPhone = () => {
  if (!userInfo.value?.phone) {
    show.value = true;
  } else {
    logout();
  }
};

// 退出登录
const logout = async () => {
  uni.clearStorageSync();
  uni.reLaunch({
    url: "/pages/login/login",
  });
};

const getLoginOut = () => {
  if (!userInfo.value.phone) {
    isShowDialog.value = true;
  } else {
    onConfirm();
  }
};

const onCancel = () => {
  isShowDialog.value = false;
};

const onConfirm = () => {
  isShowDialog.value = false;
  localStorage.removeItem("token");
  localStorage.removeItem("userInfo");
  cookies.remove("token");
  router.push({
    name: "login",
  });
};

// 返回上一页
const handleBack = () => {
  router.back();
};

// 跳转绑定手机
const goToBandPhone = () => {
  if (!userInfo.value.phone) {
    router.push({
      name: "bandPhone",
    });
  }
};

// 跳转修改密码
const goToUpdatePassword = () => {
  if (!userInfo.value.phone) {
    return Toast("请先绑定手机");
  }
  router.push({
    name: "changePwd",
  });
};

// 查询用户信息
const getUserInfo = async () => {
  const result = await myApi.selectUserById();
  userInfo.value = result.data;
  localStorage.setItem("userInfo", JSON.stringify(result.data));
};
onMounted(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.page {
  background: #f5f5f5;
  width: 100vw;
  height: calc(100vh - 48px);
}
.value {
  color: #999;
  font-size: 28rpx;
  font-weight: 550;
}

.action-box {
  display: flex;
  padding: 20rpx;
}
.btn {
  margin: 15px;
  height: 40px;
  width: calc(100% - 30px);
  border-radius: 6px;
  border: 1px solid #ebedf0;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.zhe {
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;

  .tan-box {
    background-color: #fff;
    width: 80%;
    margin: 0 10%;
    border-radius: 10px;
    padding: 20px 15px;
    .btn-list {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        width: 50%;
      }
    }
    .btn-list p:last-child {
      color: #f1b444;
    }
  }
}
</style>
